<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            width: 800px;
            /*height: 400px;*/
            background-color: gray;
            /*padding: 10px;*/
            border: 1px solid black;
        }
        .box {
            font-size: 20px;
            /*padding: 10px;*/
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
            /*float: left;*/
        }
        /*
        浮动的影响：
        1. 对兄弟元素的影响：后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面， 文字会环绕浮动元素， 对前面的兄弟元素无影响
        2. 对父元素的影响：不能撑起父元素的高度， 导致父元素高度塌陷， 但是父元素的宽度依然束缚浮动元素
        解决浮动：
        给父元素设置伪元素， 伪元素清除浮动， clear： both
        */
        .box1, .box2, .box3 {
            float: left;
        }
        .box1 {
            background-color: skyblue;
            /*float: left;*/
        }
        .box2 {
            background-color: orange;
            float: left;
        }
        .box3 {
            background-color: green;
            /*float: left;*/
        }
        /*.box4 {*/
        /*    clear: both;*/
        /*}*/
        .outer::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
<!--        <div class="box box4">盒子4</div>-->
    </div>
    <div style="background-color: orange">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium ad animi commodi consequatur, culpa delectus dolore ea eius eveniet ipsum laborum laudantium minus non nostrum odit pariatur quasi quibusdam quidem quo quod ratione reprehenderit sunt tempore ut vero voluptate. Accusamus animi dolorem eos ex facilis harum labore similique! Accusamus, alias aliquam asperiores assumenda commodi cupiditate deserunt dolorum eaque eius eos esse exercitationem expedita incidunt ipsum itaque, iusto maxime, minima necessitatibus nihil nobis nulla officia omnis perferendis perspiciatis provident quas quasi quisquam quo repellendus unde. A aliquam cumque illum neque nostrum ratione sequi, similique. Dicta dolorem labore pariatur provident tenetur.</div>
</body>
</html>